<template>
  <el-dialog
    :title="plugin.lang('count.name')"
    v-model="show"
    :width="800"
  >
    <div class="flex">
      <el-form ref="formRef" :inline="true" :model="form" :rules="rules" label-position="top">
        <el-form-item prop="count">
          <el-input-number ref="input" v-model="form.count" :placeholder="plugin.lang('count.count')" @keyup.enter="onUpdate" controls-position="right" />
        </el-form-item>
        <el-form-item prop="content">
          <el-input v-model="form.content" :placeholder="plugin.lang('count.content')" @keyup.enter="onUpdate" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :loading="loading" @click="onUpdate">
            <template #icon>
              <i class="iconfont mini icon-seleted-max"></i>
            </template>
          </el-button>
        </el-form-item>
      </el-form>
      <el-tag size="large" effect="plain">{{ plugin.lang('form.count') }} {{ goods.count }}</el-tag>
    </div>
    <el-table :data="countModel.getList()" style="width: 100%;">
      <el-table-column :label="plugin.lang('count.account_name')" prop="account_name" />
      <el-table-column :label="plugin.lang('count.content')" prop="content" min-width="200" />
      <el-table-column :label="plugin.lang('count.count')" prop="count" align="center">
        <template #default="scope">
          <el-link :type="scope.row.count > 0 ? 'primary' : 'danger'" href="javascript:;">{{ scope.row.count }}</el-link>
        </template>
      </el-table-column>
      <el-table-column :label="plugin.lang('count.time')" align="right" min-width="150">
        <template #default="scope">
          {{ time.format(scope.row.created_at) }}
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
        @current-change="countModel.page"
        :current-page="where.page"
        :page-size="where.page_size"
        layout="total, prev, pager, next, jumper"
        :total="where.page_total"
        >
      </el-pagination>
    </div>
  </el-dialog>
</template>
<script>
import { ref, nextTick } from 'vue'
import app from '@/app'
import countModel from '../../model/count'

export default {
  setup() {
    const plugin = app.plugin.index

    // 显示
    const show = ref(false)

    // 表单
    const formRef = ref(null)
    const form = ref({})

    // 规则
    const rules = {
      count: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      content: [
        { required: true, message: ' ', trigger: 'blur' }
      ]
    }

    // 商品数据
    const goods = ref({})

    // 条件
    const where = countModel.data

    const input = ref()

    // 打开
    const open = data => {
      // 商品数据
      goods.value = data
      // 清空
      form.value = { id: data.id }
      // 条件 
      where.value.id = data.id
      // 显示
      show.value = true
      // 重新加载
      countModel.page(1)

      nextTick(() => setTimeout(() => input.value.focus()))
    }

    // 提交
    const loading = ref(false)
    const onUpdate = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          countModel.update(form.value).then(() => {
            // 本地累加库存
            goods.value.count += form.value.count
          }).finally(() => {
            loading.value = false
          })
        }
      })
    }

    return {
      time: app.time,
      plugin,
      show,
      where,
      formRef,
      form,
      rules,
      input,
      open,
      goods,
      loading,
      onUpdate,
      countModel
    }
  }
}
</script>